<template>
    <div class="group-detail">
        <!-- 顶部图片 -->
        <div class="banner">
            <swiper :autoplay="true" :interval="3000" :circular="true" indicator-dots
                indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#ffffff">
                <swiper-item v-for="(img, index) in groupInfo.banners" :key="index">
                    <image :src="img.image" mode="aspectFill" />
                </swiper-item>
            </swiper>
        </div>

        <!-- 团购基本信息 -->
        <div class="info-section">
            <h1 class="title">{{ groupInfo.title }}</h1>
            <div v-if="groupInfo.description" class="summary">{{ groupInfo.description }}</div>
            <div class="meta">
                <span class="price">¥{{ groupInfo.price }}</span>
                <span class="original-price">原价: ¥{{ groupInfo.originalPrice }}</span>
                <span class="sold">已售{{ groupInfo.soldCount }}</span>
            </div>
            <div class="time" v-if="groupInfo.remainingTime!==0">
                剩余时间: {{ groupInfo.remainingTime }}
            </div>
            <div class="time" v-else>
                团购已结束
            </div>
        </div>

        <!-- 商品详情 -->
        <div class="product-detail">
            <!-- 文字介绍 -->
            <div v-if="groupInfo.descriptionGroups && groupInfo.descriptionGroups.length" class="description">
                <h2>商品信息</h2>
                <div v-for="(group, index) in groupInfo.descriptionGroups" :key="index" class="description-group">
                    <h2>{{ group.title }}</h2>
                    <ul class="description-list">
                        <li v-for="(item, i) in group.item" :key="i" class="description-item">
                            <view class="description-item-container">
                                <view>
                                    &bull;
                                    <span class="item-value">&emsp;{{ item.name }}</span>
                                </view>
                                <view>
                                    <span class="item-columns">({{ item.count }}份)</span>
                                    <span class="item-value">&emsp;{{ item.price }}元/份</span>
                                </view>

                            </view>
                        </li>
                    </ul>
                </div>
            </div>
            <div v-if="groupInfo.descriptionGroupRules && groupInfo.descriptionGroupRules.length" class="description">
                <h2>使用规则</h2>
                <view v-for="(rule, index) in groupInfo.descriptionGroupRules" :key="index" class="description-group">
                    <h2>{{ rule.title }}</h2>
                    <view class="description-list" style="padding: unset;">
                        <text>{{ rule.content }}</text>
                    </view>
                </view>
            </div>

            <!-- 图片列表 -->
            <div v-if="groupInfo.images && groupInfo.images.length" class="image-list">
                <h2>商品图片</h2>
                <div class="images">
                    <image v-for="(img, index) in groupInfo.images" :key="index" :src="img" alt="商品图片"
                        mode="widthFix" />
                </div>
            </div>
        </div>

        <!-- 购买按钮 -->
        <!-- <div class="action-bar">
            <button class="buy-btn" @click="handleBuy">立即购买</button>
        </div> -->
    </div>
</template>

<script>
import { request } from '@/utils/request';
export default {
    data() {
        return {
            groupId: null,
            groupInfo: {
                banners: [],
                title: '',
                // summary: '精选智利进口车厘子，个大饱满，新鲜直达，限时抢购中！',
                price: null,
                originalPrice: null,
                soldCount: null,
                remainingTime: '12小时34分钟',
                description: '',
                descriptionGroups: [],
                images: [],
                descriptionGroupRules: []
            }
        }
    },
    methods: {
        getgroupInfo() {
            request({
                url: '/merchant/group/getGroupDetail',
                method: 'GET',
                data: {
                    groupId: this.groupId
                }
            }).then(res => {
                this.groupInfo.description = res.data.description
                this.groupInfo.title = res.data.product_name
                this.groupInfo.soldCount = res.data.virtual_sales
                this.groupInfo.price = res.data.price
                this.groupInfo.originalPrice = res.data.original_price

                this.groupInfo.remainingTime=this.calculateTimeDifference(res.data.end_time,Date.now()/1000)

                this.groupInfo.descriptionGroupRules = res.data.usage_rules.map(items => ({
                    'title': items.title,
                    'content': items.content
                }))

                this.groupInfo.banners = res.data.main_image.map(items => ({
                    'image': items.url
                }))

                this.groupInfo.images = res.data.product_images.map(items => {
                    return items.url
                })

                this.groupInfo.descriptionGroups = res.data.dish_pairing.map(items => ({
                    'title': items.group_name,
                    'item': items.item_list.map(list => ({
                        'name': list.name,
                        'count': list.count,
                        'price': list.price,
                    }))
                }))

            })
        },
        calculateTimeDifference(timestamp1, timestamp2) {
            // 确保 timestamp2 是较晚的时间
            if (timestamp2 > timestamp1) {
                return 0;
            }

            // 计算时间差（秒）
            const diffInSeconds = timestamp1 - timestamp2;

            // 转换为天、小时、分钟和秒
            const days = Math.floor(diffInSeconds / (24 * 60 * 60));
            const hours = Math.floor((diffInSeconds % (24 * 60 * 60)) / (60 * 60));
            const minutes = Math.floor((diffInSeconds % (60 * 60)) / 60);
            const seconds = Math.floor(diffInSeconds % 60);

            // 返回格式化的时间差
            return `${days}天${hours}小时${minutes}分钟${seconds}秒`;
        },
        handleBuy() {
            // 处理购买逻辑
            console.log('购买按钮点击')
        },
    },
    onLoad(options) {
        this.groupId=options.productId
        this.getgroupInfo()
    }

}
</script>

<style scoped>
.group-detail {
    padding-bottom: 20px;
    background-color: #eee;
}

.banner {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f5f5f5;
}

.banner swiper {
    width: 100%;
    height: 100%;
}

.banner image {
    width: 100%;
    height: 100%;
}

.info-section {
    padding: 15px;
    background: #fff;
}

.title {
    font-size: 20px;
    font-weight: 900;
}

.summary {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    text-indent: 2em;
}

.meta {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.price {
    color: #f40;
    font-size: 24px;
    margin-right: 10px;
}

.original-price {
    text-decoration: line-through;
    color: #999;
    margin-right: 10px;
}

.sold {
    color: #666;
}

.time {
    color: #f40;
}

.product-detail {
    margin-top: 10px;
    margin-bottom: 30px;
    padding: 10px;
}

.description {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
}

.description h2 {
    font-weight: 600;
    font-size: 16px;
    margin: 5px;
}

.description-group {
    border-bottom: dashed 1px #ccc;
    padding: 10px;
}

.description-group:last-child {
    border-bottom: none;
}

.description-group h2 {
    font-size: 15px;
    color: #333;
}

.description-list {
    padding: 0px 15px;
}

.description-item {
    margin-bottom: 5px;
    font-size: 14px;
    color: #666;
}

.description-item-container {
    display: flex;
    justify-content: space-between;
}

.description-item-container span {
    padding: 0 5px;
}

.description-list text {
    width: 100%;
    font-size: 14px;
    padding-left: 28px;
}

.item-value {
    color: #333;
}

.image-list {
    margin-top: 20px;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
}

.image-list h2 {
    font-weight: 600;
    font-size: 16px;
    margin: 5px
}

.images {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding: 20px;
}

.images img {
    margin-top: 10px;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 10px;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.buy-btn {
    width: 100%;
    background: #f40;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 4px;
    font-size: 16px;
}
</style>
